<template>
  <div>
    <indexHeader />
    <div
      id="container"
      class="container"
      ref="container"
      v-infinite-scroll="load"
      infinite-scroll-distance="0"
    >
      <router-link
        :to="{ path:'/detail', query:{movieId:item.id}}"
        v-for="item in movieData"
        :key="item.id"
      >
        <div class="list-box" :style="{width:list_box_width+'px'}">
          <img
            :src="item.cover"
            :class="['img-'+ device]"
            :onerror="['this.src=\'' + errorImg + '\'']"
            :style="{height:list_box_width*1.1+'px'}"
            lazy
          />
          <ul>
            <li class="title">{{item.name | titleFormat}}</li>
            <li class="subtitle">{{item.last_update_time | datetimeFormat}}</li>
          </ul>
        </div>
      </router-link>
      <div
        style="width:100%;text-align: center;margin-top:10px; margin-bottom:10px;float:left;font-size:13px;"
        v-if="hasNextUrl"
      >加载数据中...</div>
      <div
        style="width:100%;text-align: center;margin-top:10px; margin-bottom:10px;float:left;font-size:13px;"
        v-else
      >数据加载完毕</div>
    </div>
    <indexFooter />
  </div>
</template>

<script scoped>
import indexHeader from "@/components/public/indexHeader.vue";
import indexFooter from "@/components/public/indexFooter.vue";
import api from "@/lib/apis/movies.js";
import { size, sizeType } from "@/lib/getSize.js";
export default {
  name: "index",
  data() {
    return {
      loadState: true,
      movieData: [],
      current_page: 0,
      query_params: { movie_category: 0, movie_name: null },
      list_box_width: 0,
      hasNextUrl: true,
      device: size.getDeviceType(),
      errorImg: require("@/assets/images/404.png"),
      viewIsKeepAlive: false
    };
  },
  inject: ["reload", "keepAlive"],
  provide() {
    return {
      reloadHome: this.reloadPage
    };
  },
  beforeRouteEnter(to, from, next) {
    next(vm => {
      vm.$refs.container.scrollTop = vm.scrollTop;
    });
  },

  beforeRouteLeave(to, from, next) {
    this.scrollTop = this.$refs.container.scrollTop;
    next();
  },

  mounted() {
    this.initLayout();
    window.onresize = () => {
      this.initLayout();
    };
  },
  methods: {
    reloadPage() {
      // data数据操作
      this.reload();
      this.query_params.movie_category = 0;
      this.query_params.movie_name = null;
      this.getMovieList(1);
    },
    watchSize() {
      switch (this.device) {
        case "web": {
          this.initlistLayout(8, 10);
          break;
        }
        case "phone": {
          this.initlistLayout(2, 10);
          break;
        }
        case "pad": {
          this.initlistLayout(4, 10);
          break;
        }
      }
    },
    initlistLayout(col_count = 1, margin = 0) {
      let containerSize = size.GET(sizeType.element, this.$refs.container);
      if (containerSize != null) {
        this.list_box_width =
          (containerSize.width - (col_count + 1) * margin) / col_count;
      }
    },
    initLayout() {
      this.device = size.getDeviceType();
      let rectSize = size.GET(sizeType.document);
      this.$refs.container.style.height = rectSize.height - 100 + "px";
      this.$refs.container.style.marginTop = "40px";
      this.watchSize();
    },
    load() {
      if (this.$route.query.category_id != null) {
        this.query_params.movie_category = this.$route.query.category_id;
      }
      if (this.$route.query.name != null) {
        this.query_params.movie_name = this.$route.query.name;
      }
      this.getMovieList(this.current_page + 1);
    },
    getMovieList(page) {
      if (this.loadState&this.hasNextUrl) {
        this.loadState = false;
        try {
          api
            .getMovieList(page, this.query_params)
            .then(response => {
              this.responseStatus = true;
              this.current_page = page;
              if (response.data.next != null) {
                this.hasNextUrl = true;
              } else {
                this.hasNextUrl = false;
              }
              if (typeof this.responseDataResults == "string") {
                this.movieData = [];
              }
              this.movieData = this.movieData.concat(response.data.results);
            })
            .catch(error => {
              this.responseStatus = false;
              console.log(error);
            });
        }
        finally{
          this.loadState= true
        }
      }
    }
  },
  filters: {
    datetimeFormat(time) {
      var date = new Date(time);
      var Y = date.getFullYear() + "-";
      var m_month = date.getMonth() + 1;
      var M = m_month > 10 ? m_month + "-" : "0" + m_month + "-";
      var D = date.getDate() + " ";
      var h = date.getHours() + ":";
      var m = date.getMinutes() + ":";
      var s = date.getSeconds();
      return Y + M + D + h + m + s;
    },
    titleFormat(value) {
      if (value.length > 8) {
        return value.substring(0, 8);
      }
      return value;
    }
  },
  components: {
    indexHeader,
    indexFooter
  }
};
</script>

<style scoped>
a {
  color: #000000;
}
.container {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
  clear: both;
  background-color: hsl(0, 0%, 96%);
  width: 100%;
  overflow-y: auto;
}
.container::-webkit-scrollbar {
  /*滚动条整体样式*/
  width: 5px; /*高宽分别对应横竖滚动条的尺寸*/
  height: 1px;
}
.container::-webkit-scrollbar-thumb {
  /*滚动条里面小方块*/
  border-radius: 20px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  background: #535353;
}
.container::-webkit-scrollbar-track {
  /*滚动条里面轨道*/
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
  border-radius: 20px;
  background: #ededed;
}
.list-box {
  border-radius: 5px;
  background-color: #ffffff;
  box-shadow: 5px 5px 5px #e9e9e9;
  float: left;
  margin-top: 10px;
  margin-left: 10px;
}

.list-box img {
  width: 100%;
  border-radius: 5px 5px 0px 0px;
}
.img-phone {
  height: 190px;
}
.img-web {
  height: 210px;
}
.img-pad {
  height: 220px;
}
.list-box ul {
  list-style: none;
  margin: 0px;
  padding: 0px;
  height: 70px;
  width: 100%;
}
.list-box li {
  width: 100%;
  padding-left: 10px;
}

.title {
  font-size: 14px;
  height: 40px;
  line-height: 40px;
}
.subtitle {
  font-size: 12px;
  height: 20px;
  line-height: 20px;
}
</style>